<template>
  <q-page class="flex flex-center">
    <q-splitter
      v-model="splitterModel"
      style="width: 100%;height: calc(100vh - 50px)"
    >
      <template v-slot:before>
        <q-tabs v-model="tab" vertical class="text-teal">
          <q-tab name="message" icon="message" label="消息" />
          <q-tab name="user" icon="supervisor_account" label="好友" />
          <q-tab name="setting" icon="settings" label="设置" />
        </q-tabs>
      </template>

      <template v-slot:after>
        <q-tab-panels
          v-model="tab"
          animated
          transition-prev="jump-up"
          transition-next="jump-up"
        >
          <q-tab-panel name="message">
            <div class="text-h4 q-mb-md">
              <Message />
            </div>
          </q-tab-panel>

          <q-tab-panel name="user">
            <div class="text-h4 q-mb-md">
              <Friend />
            </div>
          </q-tab-panel>

          <q-tab-panel name="setting">
            <div class="text-h4 q-mb-md">
              <Setting />
            </div>
          </q-tab-panel>
        </q-tab-panels>
      </template>
    </q-splitter>
  </q-page>
</template>

<script>
import Message from './components/Message';
import Setting from '../setting';
import Friend from '../friend';

export default {
  name: 'HelloWorld',
  components: {
    Message,
    Setting,
    Friend,
  },
  data() {
    return {
      tab: 'message',
      splitterModel: 10,
    };
  },
};
</script>

<style lang="scss" scoped>
.q-tab-panels {
  max-height: calc(100vh - 50px);
  .q-tab-panel {
    padding: 0;
  }
}
</style>
